﻿@{
    ViewBag.Title = "Question";
    Layout = "~/Views/Shared/BE/_Admin_Layout.cshtml";
}
<article class="module width_3_quarter">
<div id="QuestionTable"></div>
</article>

<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#QuestionTable').jtable({
            //...
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            openChildAsAccordion: true,
            columnResizable: false,
            paging: true,
            pageSize: 10,
            defaultSorting: 'CreatedTime DESC',
            sorting: true,
            title: 'Danh sách câu hỏi',
            actions: {
                listAction: '@Url.Action("ListQuestion")',
                deleteAction: '@Url.Action("DeleteQuestion")'
                //updateAction: 
                //createAction: 'Url.Action("CreateQuestion")'
            },
            fields: {
                QuestionID: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                QuestionContent: {
                    title: 'Nội dung câu hỏi',
                    width: '70%',
                    type: 'textarea',
                    inputClass: 'validate[required,maxSize[1000]]'
                },
                CreatedTime: {
                    title: 'Ngày gửi',
                    type: 'date',
                    width: '10%',
                    displayFormat: 'dd-mm-yy',
                    create: false,
                    edit: true
                },
                UserName: {
                    title: 'Người gửi',
                    create: false,
                    width: '10%'
                },
                AnswerCount: {
                    title: 'Số câu trả lời',
                    create: false,
                    width: '12%'
                },
                AnswerList: {
                    title: 'DS câu trả lời',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (answerData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="@Url.Content("~/Content/BE/images/icn_categories.png")" />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#QuestionTable').jtable('openChildTable',
                                    $img.closest('tr'),
                                    {
                                        title: 'Danh sách câu trả lời',
                                        selecting: true, //Enable selecting
                                        multiselect: true, //Allow multiple selecting
                                        selectingCheckboxes: true, //Show checkboxes on first column
                                        columnResizable: false,
                                        paging: true,
                                        pageSize: 10,
                                        defaultSorting: 'CreatedTime DESC',
                                        sorting: true,
                                        actions: {
                                            listAction: '@Url.Action("ListAnswer")?questionID=' + answerData.record.QuestionID,
                                            deleteAction: '@Url.Action("DeleteAnswer")',
                                            updateAction: '@Url.Action("UpdateAnswer")'//,
                                            //createAction: '@Url.Action("CreateAnswer")'
                                        },
                                        fields: {
                                            QuestionID: {
                                                type: 'hidden',
                                                defaultValue: answerData.record.QuestionID
                                            },
                                            AnswerID: {
                                                key: true,
                                                create: false,
                                                edit: false,
                                                list: false
                                            },
                                            AnswerContent: {
                                            title: 'Nội dung',
                                            width: '35%',
                                            type: 'textarea'
                                            },
                                            CreatedTime: {
                                                title: 'Ngày',
                                                type: 'date',
                                                displayFormat: 'dd-mm-yy',
                                                defaultValue: $.datepicker.formatDate('dd-mm-yy', new Date())
                                            },
                                            UserName: {
                                                title: 'Người trả lời',
                                                create: false,
                                                edit: false,
                                            }
                                        },
                                        //Initialize validation logic when a form is created
                                        formCreated: function (event, data) {
                                            data.form.validationEngine();
                                        },
                                        //Validate form when it is being submitted
                                        formSubmitting: function (event, data) {
                                            return data.form.validationEngine('validate');
                                        },
                                        //Dispose validation logic when form is closed
                                        formClosed: function (event, data) {
                                            data.form.validationEngine('hide');
                                            data.form.validationEngine('detach');
                                        }

                                    }, function (data) { //opened handler
                                        data.childTable.jtable('load');
                                    });
                                    //Delete selected students
                                    $('.jtable-child-table-container #DeleteAllButton').button().click(function () {
                                        var $selectedRows = $('.jtable-child-table-container').jtable('selectedRows');
                                        $('.jtable-child-table-container').jtable('deleteRows', $selectedRows);
                                    });
                        });
                        //Return image to show on the person row
                        return $img;
                    }                       
                }
            },
        });

        //Re-load records when user click 'load records' button.
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#QuestionTable').jtable('load', {
                keywords: $('#name').val(),
            });
        });

        //Load person list from server
        $('#QuestionTable').jtable('load');
        
        //
        //Delete selected students
        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#QuestionTable').jtable('selectedRows');
            $('#QuestionTable').jtable('deleteRows', $selectedRows);
        });
    });
</script>